<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
    <title>代理商管理系统</title>
    <link rel="stylesheet" type="text/css" href="${ctx}/statics/easyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="${ctx}/statics/easyui/themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="${ctx}/statics/easyui/themes/color.css" />
    <link rel="stylesheet" type="text/css" href="${ctx}/statics/easyui/themes/demo.css" />
    <script src="${ctx}/statics/easyui/jquery.min.js" type="text/javascript"></script>
    <script src="${ctx}/statics/easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="${ctx}/statics/easyui/easyui-lang-zh_CN.js" type="text/javascript"></script>
</head>
<body class="easyui-layout" >
    <div id="tool" data-options="region:'north',border:false" style="width:100%;height:50px;line-height:50px;background:#eee;text-align:center">
        <span style="font-size:13px">关键词:</span>
        <input id="search" style="width:200px;height:24px;" />
    </div>
    <div data-options="region:'center',border:false" style="width:100%;" >
        <table id="keywordsDg" style="width:100%;"></table>
    </div>
    <%--续费窗口--%>
    <div id="winCharge" class="easyui-window" title="续费操作" style="width:400px;height:330px;"
         data-options="iconCls:'icon-save',modal:true,closed:true">
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'north',split:false" style="height:40px;line-height:38px;text-align:center" >
                <span id="chargeTitle"></span>
                <span id="chargeMoney" style="color:red"></span>
            </div>
            <div data-options="region:'center'" style="text-align:center">
                <form id="rechargeForm">
                    <table id="ctCharge" style="margin:20px auto;display:none" cellpadding="5px">
                        <tr>
                            <td>客户名称:</td>
                            <td>
                                <input class="easyui-textbox" type="text" name="customName" style="width:150px" readonly/>
                            </td>
                        </tr>
                        <tr>
                            <td>关键词:</td>
                            <td>
                                <input class="easyui-textbox" type="text" name="keywords" style="width:150px" readonly/>
                            </td>
                        </tr>
                        <tr>
                            <td>服务类别:</td>
                            <td>
                                <input name="productType" id="productType" value="--请选择--" style="width:150px" />
                                <input name="servicePrice" type="hidden" />
                            </td>
                        </tr>
                        <tr>
                            <td>服务年限:</td>
                            <td>
                                <input name="serviceYears" id="serviceYears" value="--请选择--" style="width:150px" />
                            </td>
                        </tr>
                        <tr>
                            <td>价格:</td>
                            <td>
                                <input id="totalPrice" class="easyui-textbox" name="totalPrice" type="text" style="width:150px;" readonly/>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div data-options="region:'south',border:false" style="text-align:right;height:40px;padding:7px 10px 5px">
                <a id="confirmCharge" class="easyui-linkbutton" data-options="iconCls:'icon-ok',size:'small'" href="javascript:void(0)"
                   style="width:80px">确定</a>
                <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel',size:'small'" href="javascript:void(0)"
                   onclick="closeWin()" style="width:80px">取消</a>
            </div>
        </div>
    </div>

    <%--开通App窗口--%>
    <div id="winApp" class="easyui-window" title="开通APP" style="width:400px;height:360px;"
         data-options="iconCls:'icon-save',modal:true,closed:true">
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'north',split:false" style="height:40px;line-height:38px;text-align:center" >
                <span id="appTitle"></span>
                <span id="appMoney" style="color:red"></span>
            </div>
            <div data-options="region:'center'" style="text-align:center">
                <form id="appForm">
                    <table id="ctApp" style="margin:20px auto;display:none" cellpadding="5px">
                        <tr>
                            <td>登陆账号:</td>
                            <td><input id="name" class="easyui-textbox" type="text" name="appUserName" style="width:150px" value=""
                                       data-options="required:true,missingMessage:'登陆账号不能为空'" />
                            </td>
                        </tr>
                        <tr>
                            <td>登陆密码:</td>
                            <td><input id="pass" class="easyui-textbox" type="password" name="appPassword" style="width:150px" value=""
                                       data-options="required:true,missingMessage:'登陆密码不能为空'" />
                            </td>
                        </tr>
                        <tr>
                            <td>关键词:</td>
                            <td>
                                <input class="easyui-textbox" type="text" id="keywords" style="width:150px" readonly/>
                            </td>
                        </tr>
                        <tr>
                            <td>客户名称:</td>
                            <td>
                                <input class="easyui-textbox" type="text" id="customName" style="width:150px" readonly/>
                            </td>
                        </tr>
                        <tr>
                            <td>开通价格:</td>
                            <td>
                                <input id="appPrice" class="easyui-textbox" name="appPrice" type="text" style="width:150px;" readonly/>
                            </td>
                        </tr>
                        <tr>
                            <td>服务类型:</td>
                            <td>
                                <input id="serviceType" class="easyui-textbox" type="text" style="width:150px;" readonly/>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div data-options="region:'south',border:false" style="text-align:right;height:40px;padding:7px 10px 5px">
                <a id="confirmApp" class="easyui-linkbutton" data-options="iconCls:'icon-ok',size:'small'" href="javascript:void(0)"
                   style="width:80px">确定</a>
                <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel',size:'small'" href="javascript:void(0)"
                   onclick="closeWin()" style="width:80px">取消</a>
            </div>
        </div>
    </div>

    <script>
        $(
            function ()
            {
                $('#ctCharge').hide();
                $('#ctApp').hide();
                var keywordsDateGrid = $("#keywordsDg").datagrid({
                    url:'${ctx}/do/showKeywordsDataGrid',
                    singleSelect:true,
                    fitColumns:true,
                    striped:true,
                    fit:true,
                    rownumbers:true,
                    pagination:true, //增加分页工具栏
                    pageNumber:1, //设置初始化页码
                    pageSize:10,  //页大小
                    pageList:[5,10,15], //显示数量选择
                    columns:
                        [
                            [
                                {field:'keywords',title:'关键词',width:'10%',align:'center'},
                                {field:'customName',title:'企业名称',width:'10%',align:'center'},
                                {field:'agentName',title:'代理商',width:'5%',align:'center'},
                                {field:'serviceYears',title:'年限',width:'5%',align:'center'},
                                {field:'regDatetime',title:'申请日期',width:'12%',align:'center'},
                                {field:'regPassDatetime',title:'到期日期',width:'12%',align:'center'},
                                {field:'isPass',title:'当前状态',width:'7%',align:'center',
                                    formatter: function(value,row,index)
                                    {
                                        var str = "";
                                        switch ( row.isPass )
                                        {
                                            case 0:
                                                str = "未过期";
                                                break;
                                            case 1:
                                                str = "预注册过期";
                                                break;
                                            case 2:
                                                str = "正式注册过期";
                                                break;
                                        }
                                        return str;
                                    },
                                    styler: function(value,row,index)
                                    {
                                        return ( (value<1)?"color:green":"color:red" );
                                    }
                                },
                                {field:'checkStatus',title:'审核状态',width:'7%',align:'center',
                                    formatter: function(value,row,index)
                                    {
                                        var str = "";
                                        switch ( value )
                                        {
                                            case 0:
                                                str = "已申请";
                                                break;
                                            case 1:
                                                str = "审核中";
                                                break;
                                            case 2:
                                                str = "已通过";
                                                break;
                                            case 3:
                                                str = "未通过";
                                                break;
                                        }
                                        return str;
                                    },
                                    styler: function(value,row,index)
                                    {
                                        return ( (value!=3)?"color:green":"color:red" );
                                    }
                                },
                                {field:'isUse',title:'使用状态',width:'7%',align:'center',
                                    formatter: function(value,row,index)
                                    {
                                        return ( value?"已使用":"未使用" );
                                    },
                                    styler: function(value,row,index)
                                    {
                                        return ( value?"color:green":"color:red" );
                                    }
                                },
                                {field:'openApp',title:'App开通状态',width:'7%',align:'center',
                                    formatter: function(value,row,index)
                                    {
                                        return ( value?"已开通":"未开通" );
                                    },
                                    styler: function(value,row,index)
                                    {
                                        return ( value?"color:green":"color:red" );
                                    }
                                },
                                {field:'control',title:'操作', width:'16%', align:'center',
                                    formatter: function(value,row,index)
                                    {
                                        var str = "无操作";
                                        //状态为已使用情况下
                                        if( row.isUse )
                                        {
                                            //审核已通过情况下
                                            if( row.checkStatus == 2 )
                                            {
                                                //未过期 未开通app时 显示续费 开通app
                                                if( row.isPass == 0 && !row.openApp )
                                                {
                                                    str = "<a href='javascript:void(null)' class='easyui-linkbutton' onclick='openApp(" + JSON.stringify(row) + ")' " +
                                                        " data-options='iconCls:\"icon-edit\",size:\"small\"'  >开通APP</a>" + "&nbsp;&nbsp;|&nbsp;&nbsp;" +
                                                        "<a href='javascript:void(null)' class='easyui-linkbutton' onclick='recharge(" + JSON.stringify(row) + ")' " +
                                                        " data-options='iconCls:\"icon-edit\",size:\"small\"'  >续费</a>";

                                                }
                                                //其余均显示续费
                                                else
                                                {
                                                    str = "<a href='javascript:void(null)' class='easyui-linkbutton' onclick='recharge(" + JSON.stringify(row) + ")' " +
                                                        " data-options='iconCls:\"icon-edit\",size:\"small\"'  >续费</a>";
                                                }
                                            }
                                        }

                                        return str;
                                    }
                                }
                            ]
                        ]
                });

                //点击搜索客户根据客户名进行模糊搜索
                $("#search").textbox(
                    {
                        buttonText:'搜索',
                        buttonIcon:'icon-search',
                        prompt:'请输入关键词搜索',
                        onClickButton:function ()
                        {
                            //获取要搜索的客户名称
                            var keywords = $("#search").textbox('getValue');
                            //将输入的客户名加入请求参数中
                            //因customDatagrid的原设置中已包含url,故无需reload
                            keywordsDateGrid.datagrid(
                                {
                                    queryParams: {"keywords":keywords}
                                }
                            );
                        }
                    }
                );

                //查询服务类别
                $("#productType").combobox(
                    {
                        url:'${ctx}/do/comboboxJsonStr',
                        queryParams:{"action":"productType"},
                        valueField:'configTypeValue',
                        textField:'configTypeName',
                        editable: false,
                        onSelect:function( rec )
                        {
                            //设置隐藏域的value为当前选择的服务价格
                            var price = parseFloat( rec.configValue );
                            $("[name=servicePrice]").val( price );
                            calculatePrice();
                        }
                    });

                //查询服务年限
                $("#serviceYears").combobox(
                    {
                        url:'${ctx}/do/comboboxJsonStr',
                        queryParams:{"action":"serviceYears"},
                        valueField:'years',
                        textField:'years',
                        editable: false,
                        onSelect:function( rec )
                        {
                            calculatePrice();
                        }
                    });

                //查询开通app价格
                $.ajax(
                    {
                        type:"POST",
                        url:'${ctx}/do/comboboxJsonStr',
                        data:{"action":"appPrice"},
                        dataType:"json",
                        success:function( json )
                        {
                            $("#appPrice").textbox('setValue' , json.price );
                        }
                    }
                );
            }
        );

        //根据服务类型和服务年限设置价格
        function calculatePrice()
        {
            //获取单价
            var price = $("[name=servicePrice]").val();
            //alert("单价: " + price );
            //alert( typeof price );
            var years = $("#serviceYears").combobox('getValue');
            //alert( typeof years );
            if( price != "--请选择--" && years != "--请选择--" )
            {
                var total = parseFloat( price ) * parseInt( years );
                $("#totalPrice").textbox('setValue' , total );
            }
            else
            {
                //否则清空价格显示内容
                $("#totalPrice").textbox('clear');
            }
        }

        //点击续费时弹出
        function recharge( row )
        {
            //设置续费窗口标题
            $('#chargeTitle').text("为" + row.keywords + "续费" );
            //发送ajax请求获取当前账户余额
            $.ajax(
                {
                    type:"POST",
                    url:"${ctx}/do/comboboxJsonStr",
                    data:{"action":"money"},
                    dataType:"json",
                    success:function ( json )
                    {
                        $("#chargeMoney").text("[当前账户余额: ￥" + json.money + "元]");
                    }
                }
            );
            //设置客户名称和关键词
            $("#rechargeForm").form( 'load' ,
                {
                    customName:row.customName,
                    keywords:row.keywords
                });
            //状态为未过期 则续费只能选择当前服务 并设置只读
            if( row.isPass == 0 )
            {
                $("#productType").combobox('clear').combobox('select',row.productType ).combobox('readonly');
            }
            //状态为已过期 续费可以选择服务 并解除只读设置
            else
            {
                $("#productType").combobox('clear').combobox('setValue', "--请选择--" ).combobox('readonly' , false );
            }
            $("#serviceYears").combobox('clear').combobox('setValue',"--请选择--");
            $("#totalPrice").textbox('clear');
            //为续费确认按钮注册事件--点击确认提交表单
            $("#confirmCharge").off('click').on('click',
                function ()
                {
                    //设置表单请求
                    $("#rechargeForm").form(
                        {
                            url:"${ctx}/do/keyWordsCharge",
                            //提交前设置表单携带参数
                            onSubmit: function(param)
                            {
                                param.id = row.id;
                                param.isPass = row.isPass;
                                param.detailType = 4;
                            },
                            //提交成功后处理返回值
                            success:function(data)
                            {
                                //注意需要将返回值转换为json
                                var json = JSON.parse(data);
                                infoWindows( "续费" , json );
                                //刷新页面
                                $("#keywordsDg").datagrid('reload');
                            }
                        });
                    //提交表单
                    $("#rechargeForm").submit();
                    $('#ctCharge').hide();
                    //关闭窗口
                    $('#winCharge').window('close');
                });
            $('#ctCharge').show();
            $('#winCharge').window('open');
        }

        //点击开通app时弹出窗口
        function openApp( row )
        {
            //设置开通App窗口标题
            $('#appTitle').text("为" + row.keywords + "续费" );
            //清空登陆账号和密码
            $("#name").textbox('clear');
            $("#pass").textbox('clear');
            //发送ajax请求获取当前账户余额
            $.ajax(
                {
                    type:"POST",
                    url:"${ctx}/do/comboboxJsonStr",
                    data:{"action":"money"},
                    dataType:"json",
                    success:function ( json )
                    {
                        $("#appMoney").text("[当前账户余额: ￥" + json.money + "元]");
                    }
                }
            );
            //设置客户名称和关键词
            $("#customName").textbox('setText' , row.customName );
            $("#keywords").textbox('setText' , row.keywords);
            //查询该关键词的服务类型
            $.ajax(
                {
                    type:"POST",
                    url:'${ctx}/do/comboboxJsonStr',
                    data:{"action":"productType"},
                    dataType:"json",
                    success:function( json )
                    {
                        for( var i in json )
                        {
                            if( json[i].configTypeValue == row.productType )
                            {
                                $("#serviceType").textbox('setText' , json[i].configTypeName );
                            }
                        }
                    }
                }
            );
            //为开通app确认按钮注册事件--点击确认提交表单
            $("#confirmApp").off('click').on('click',
                function ()
                {
                    //设置表单请求
                    $("#appForm").form( 'submit' ,
                        {
                            url:"${ctx}/do/openApp",
                            novalidate:false,
                            //提交前设置表单携带参数
                            onSubmit: function(param)
                            {
                                param.id = row.id;
                                param.detailType = 5;
                                //校验表单 校验不通过返回false,不提交
                                return $(this).form('validate');
                            },
                            //提交成功后处理返回值
                            success:function(data)
                            {
                                //注意需要将返回值转换为json
                                var json = JSON.parse(data);
                                infoWindows( "开通APP" , json );
                                //刷新页面
                                $("#keywordsDg").datagrid('reload');
                            }
                        });
                    //提交表单
                    $('#ctApp').hide();
                    //关闭窗口
                    $('#winApp').window('close');
                });
            $('#ctApp').show();
            $('#winApp').window('open');
        }


        //消息提示窗口
        function infoWindows( str , json )
        {
            var title = str + "操作";
            var info = (json.message == 1?(str + "成功"):( str + "失败"));
            var icon = (json.message == 1?"info":"error");
            $.messager.alert(title,info,icon);
        }

        //关闭操作窗口
        function closeWin()
        {
            $('#winApp').window('close');
            $('#winCharge').window('close');
        }

    </script>
</body>
</html>
